<template>
    <!-- 我的喜欢 -->
    <div class="like-play-list-container">

        <!-- 我的喜欢导航 -->
        <div class="like-play-list-nav">

            <!-- 自动输入框 -->
            <n-auto-complete style="width: 300px;margin-right: 10px;" v-model:value="inputValue" :input-props="{ autocomplete: 'disabled' }" clearable :options="options" :on-select="selectOneAudio" placeholder="请输入要搜的本地歌手、本地音乐" />

            <!-- 随机播放按键 -->
            <n-button ghost @click="playLikePlayListRandom">开始播放</n-button>

        </div>

        <!-- 搜索列表内容 -->
        <div class="like-play-list-content">

            <div v-if="!userInfo.loginDate" style="font-size: 1.5rem;">
                检测到未登录，前往<router-link to="registerOrLogin">登录</router-link>
            </div>

            <div v-if="userInfo.loginDate && usePlayList.likePlayList.length == 0" style="font-size: 1.5rem;">
                喜欢列表为空，跳转<router-link to="audioLibrary" @click="linkToAudioLibrary">乐库</router-link>添加我的喜欢
            </div>

            <!-- 搜索列表 -->
            <n-list class="like-play-list" clickable hoverable v-if="usePlayList.likePlayList.length != 0">

                <!-- 搜索列表头部 -->
                <template #header>

                    <div style="width: calc(100vw - 256px);display: flex;">
                        <div style="width: 50px;margin-right: 20px;" />
                        <div style="width: calc(100vw - 326px);;display: flex;justify-content: space-around;">
                            <div style="width: 35%;">
                                喜欢列表（{{ usePlayList.likePlayList.length }}）&nbsp;&nbsp; 歌名
                            </div>
                            <div style="width: 20%;">
                                专辑/出处
                            </div>
                            <div style="width: 15%;">
                                作词
                            </div>
                            <div style="width: 10%;">
                                时长
                            </div>
                            <div style="width: 10%;">
                                大小
                            </div>
                        </div>
                    </div>

                </template>

                <!-- 滚动条 -->
                <n-scrollbar style="max-height: calc(100vh - 255px)">

                    <!-- 搜索列表展示 -->
                    <n-list-item v-for="(item, index) in usePlayList.likePlayList" :key="index" @dblclick="playLikePlayList(item.audioId, item.audioName, item.audioSrc, item.audioCover, index)">

                        <!-- 定位指示/我的最爱 -->
                        <template #prefix>

                            <div style="display: flex;width: 50px;justify-content: space-around;">

                                <!-- 定位播放 -->
                                <n-button v-if="item.play" text>
                                    <template #icon>
                                        <n-icon>
                                            <svg class="icon" aria-hidden="true">
                                                <use xlink:href="#icon-youjiantou"></use>
                                            </svg>
                                        </n-icon>
                                    </template>
                                </n-button>

                                <!-- 不定位播放 -->
                                <n-button v-if="!item.play" text>
                                    <template #icon>
                                        <n-icon />
                                    </template>
                                </n-button>

                                <!-- 我的喜欢 -->
                                <n-button v-if="item.like" text @click="iDontLikeIt(item.audioId)">
                                    <template #icon>
                                        <n-icon>
                                            <svg class="icon" aria-hidden="true">
                                                <use xlink:href="#icon-shoucang_shoucang"></use>
                                            </svg>
                                        </n-icon>
                                    </template>
                                </n-button>

                                <!-- 我不喜欢 -->
                                <n-button v-if="!item.like" text @click="iLikeIt(item.audioId)">
                                    <template #icon>
                                        <n-icon>
                                            <svg class="icon" aria-hidden="true">
                                                <use xlink:href="#icon-shoucang_quxiaoshoucang"></use>
                                            </svg>
                                        </n-icon>
                                    </template>
                                </n-button>

                            </div>

                        </template>

                        <!-- 列表 -->
                        <div class="audioInfo">

                            <n-performant-ellipsis style="width: 30%;max-width: 30%">
                                <n-gradient-text
                                    :gradient="`linear-gradient(${useSystemConfig.musicListFontColorDeg}deg, ${useSystemConfig.musicListFontColorStrat} 0%, ${useSystemConfig.musicListFontColorMiddle} 50%, ${useSystemConfig.musicListFontColorEnd} 100%)`"
                                    style="user-select: none;">
                                    {{ (index + 1) + '. ' + item.audioName }}
                                </n-gradient-text>
                            </n-performant-ellipsis>

                            <n-performant-ellipsis style="width: 25%;max-width: 25%">
                                <n-gradient-text
                                    :gradient="`linear-gradient(${useSystemConfig.musicListFontColorDeg}deg, ${useSystemConfig.musicListFontColorStrat} 0%, ${useSystemConfig.musicListFontColorMiddle} 50%, ${useSystemConfig.musicListFontColorEnd} 100%)`"
                                    style="user-select: none;">
                                    {{ item.audioVersion }}
                                </n-gradient-text>
                            </n-performant-ellipsis>

                            <n-performant-ellipsis style="width: 15%;max-width: 15%">
                                <n-gradient-text
                                    :gradient="`linear-gradient(${useSystemConfig.musicListFontColorDeg}deg, ${useSystemConfig.musicListFontColorStrat} 0%, ${useSystemConfig.musicListFontColorMiddle} 50%, ${useSystemConfig.musicListFontColorEnd} 100%)`"
                                    style="user-select: none;">
                                    作词：{{ item.write }}
                                </n-gradient-text>
                            </n-performant-ellipsis>

                            <n-performant-ellipsis style="width: 10%;max-width: 10%">
                                <n-gradient-text
                                    :gradient="`linear-gradient(${useSystemConfig.musicListFontColorDeg}deg, ${useSystemConfig.musicListFontColorStrat} 0%, ${useSystemConfig.musicListFontColorMiddle} 50%, ${useSystemConfig.musicListFontColorEnd} 100%)`"
                                    style="user-select: none;">
                                    {{ item.duration }}
                                </n-gradient-text>
                            </n-performant-ellipsis>

                            <n-performant-ellipsis style="width: 10%;max-width: 10%">
                                <n-gradient-text
                                    :gradient="`linear-gradient(${useSystemConfig.musicListFontColorDeg}deg, ${useSystemConfig.musicListFontColorStrat} 0%, ${useSystemConfig.musicListFontColorMiddle} 50%, ${useSystemConfig.musicListFontColorEnd} 100%)`"
                                    style="user-select: none;">
                                    {{ bytesToSize(item.size) }}
                                </n-gradient-text>
                            </n-performant-ellipsis>

                        </div>

                    </n-list-item>

                </n-scrollbar>

            </n-list>

        </div>

    </div>
</template>
    
<script setup lang='ts'>
import { getCurrentInstance, ref, computed } from 'vue';
import { usePlayListStore, useSystemConfigStore, usePlayConfigStore, userInfoStore } from '../../store';
import { bytesToSize } from '../../util/calculate'
import { dontLikeItAudio, likeItAudio } from '../../ajax';
import { useMessage } from 'naive-ui'

const instance = getCurrentInstance()
const usePlayList = usePlayListStore()
const useSystemConfig = useSystemConfigStore()
const usePlayConfig = usePlayConfigStore()
const userInfo = userInfoStore()
const message = useMessage()

/* *******************************列表有数据时******************************* */
// 跳转乐库
const linkToAudioLibrary = () => {
    useSystemConfig.changePage('audioLibrary')
}


/* ******************************列表没有数据时****************************** */
// 自动填充框的输入值
const inputValue = ref('')
// 自动填充框逻辑
const options = computed(() => {
    if (inputValue.value == '') {
        return usePlayList.likePlayList.map(item => {
            return {
                label: item.audioName.split('.')[0],
                value: item.audioName.split('.')[0]
            }
        })
    } else {
        const reg = new RegExp(inputValue.value, 'ig')
        const array: any[] = []
        for (let index = 0; index < usePlayList.likePlayList.length; index++) {
            const element = usePlayList.likePlayList[index];
            if (reg.test(element.audioName)) {
                array.push({
                    label: element.audioName.split('.')[0],
                    value: element.audioName.split('.')[0]
                })
            }
        }
        return array
    }
})
// 选中填充内容事件
const selectOneAudio = (value) => {
    const reg = new RegExp(value)
    let index = 0
    let audioSrc = ''
    let audioCover = ''
    let audioName = ''
    for (let _index = 0; index < usePlayList.likePlayList.length; _index++) {
        const element = usePlayList.likePlayList[_index];
        if (reg.test(element.audioName)) {
            index = _index
            audioSrc = element.audioSrc
            audioCover = element.audioCover
            audioName = element.audioName
            break;
        }
    }
    usePlayConfig.changeIndex(index)
    usePlayConfig.changeAudioName(audioName)
    usePlayConfig.changeAudioSrc(audioSrc)
    usePlayConfig.changeAudioCover(audioCover)
    usePlayList.positionAudioInPlayList(usePlayConfig.playListMode, index)
    // 提交一个本地播放事件
    instance?.proxy?.$Bus.emit('playLikeAudio', { playListMode: 'likePlayList', audioSrc, index })
}

// 双击列表音频播放我的喜欢
const playLikePlayList = (audioId: string, audioName: string, audioSrc: string, audioCover: string, index: number) => {
    // 播放列表切换至乐库、缓存乐库播放地址、缓存播放列表数组下标
    usePlayConfig.changeAudioId(audioId)
    usePlayConfig.changeAudioName(audioName)
    usePlayConfig.changeAudioCover(audioCover)
    usePlayConfig.changeAudioSrc(audioSrc)
    usePlayConfig.changeIndex(index)
    // 清除上次播放列表的定位
    usePlayList.resetPositionAudioInPlayList(usePlayConfig.playListMode)
    // 提交一个乐库播放事件
    instance?.proxy?.$Bus.emit('playLikeAudio', { playListMode: 'likePlayList', audioSrc, index })
}

// 点击播放按钮随机播放我的喜欢
const playLikePlayListRandom = () => {

    if (usePlayList.likePlayList.length == 0) return

    // 播放列表切换至乐库、缓存乐库播放地址、缓存播放列表数组下标
    const index = Math.floor(Math.random() * usePlayList.likePlayList.length)
    usePlayConfig.changeAudioId(usePlayList.likePlayList[index].audioId)
    usePlayConfig.changeAudioName(usePlayList.likePlayList[index].audioName)
    usePlayConfig.changeAudioCover(usePlayList.likePlayList[index].audioCover)
    usePlayConfig.changeAudioSrc(usePlayList.likePlayList[index].audioSrc)
    usePlayConfig.changeIndex(index)
    // 清除上次播放列表的定位
    usePlayList.resetPositionAudioInPlayList(usePlayConfig.playListMode)
    // 提交一个乐库播放事件
    instance?.proxy?.$Bus.emit('playLikeAudio', { playListMode: 'likePlayList', audioSrc: usePlayList.likePlayList[index].audioSrc, index: index })

}

// 添加我的喜欢
const iLikeIt = async (_id: string | undefined) => {

    if (_id == undefined) return;

    // 查询本地缓存并修改
    let i: undefined | number = undefined
    // const audioId = data.audioObj.audioId
    for (let index = 0; index < usePlayList.likePlayList.length; index++) {
        const element = usePlayList.likePlayList[index];
        if (element.audioId == _id) {
            i = index
        }
    }

    if (i == undefined) {
        message.error('未知的错误')
    } else {

        // 上传服务器--保持原来的位置
        const { data } = await likeItAudio(_id, 'original', i)
        if (data.code == 0) {
            message.success(data.message)
        } else {
            message.warning(data.message)
        }
        usePlayList.likePlayList[i as unknown as number].like = true
    }

}
// 取消我的喜欢
const iDontLikeIt = async (audioId: string) => {

    // 上传服务器
    const { data } = await dontLikeItAudio(audioId)

    if (data.code == 0) {

        // 切换不喜欢的状态
        let i: undefined | number = undefined
        for (let index = 0; index < usePlayList.likePlayList.length; index++) {
            const element = usePlayList.likePlayList[index];

            if (element.audioId == audioId) {
                i = index
                break;
            }

        }

        if (i !== undefined) {
            usePlayList.likePlayList[i as number].like = false
        }

        message.success(data.message)

    } else {
        message.warning(data.message)
    }

}



</script>
    
<style scoped lang="less">
.like-play-list-container {
    display: flex;
    flex-wrap: wrap;
    height: calc(100vh - 120px);
    margin-top: 10px;

    .like-play-list-nav {
        width: 100%;
        height: 35px;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
    }

    .like-play-list-content {
        width: 100%;
        height: calc(100vh - 165px);

        .audioInfo {
            width: calc(100vw - 326px);
            display: flex;
            justify-content: space-around;
        }
    }
}
</style>